<template>
    <Dialog modal load-animation :limit-confirm="isChosen" :confirm-to="`/game/${chosenMode}`" cancel-to="/main/normal">
        <template #header>
            <h1 class="header">游戏模式</h1>
        </template>
        <template #content>
            <div class="mode-choose">
                <ul>
                    <li v-for="option in modeOptions" :class="{ chosen: chosenMode === option.en }"
                        :key="option.name" @click="chosenMode = option.en">{{
                            option.name }}</li>
                </ul>
            </div>
        </template>
    </Dialog>
</template>

<script lang="ts" setup>
import Dialog from '@/components/ui/dialog.vue';
import { computed, ref } from 'vue';
const modeOptions: ({ name: string; en: string })[] = [
    { name: "诸侯争霸", en: "baseplay" },
    { name: "角色扮演", en: "cosplay" },
    { name: "历史重现", en: "replay" },
    { name: "联机模式", en: "connectplay" }
]
const chosenMode = ref("");
const isChosen = computed(() => !Boolean(chosenMode.value));
</script>

<style scoped>
.header {
    font-size: min(42px, 6vh);
}

.mode-choose {
    width: 100%;
    height: 100%;
    position: relative;
}

.mode-choose::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(/src/assets/img/texture/01.webp);
    background-size: cover;
    background-position: center;
    position: absolute;
    opacity: 0.4;
    inset: 0;
    z-index: -1
}

ul {
    padding: 1vh 1vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

li {
    font-size: 9vh;
    transition: 0.1s;
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    font-family: huakangxinzhuanti;
}

li:first-child {
    margin-top: auto;
}

li:last-child {
    margin-bottom: auto;
}

li:not(:first-child, :last-child) {
    margin: min(15px, 1vh) 0;
}

li.chosen {
    background-color: rgb(128, 128, 128, 0.8);
}

li:hover {
    background-color: rgb(128, 128, 128, 0.8);
}
</style>